<template>
	<div class="app-container">
    
		<div class="filter-container clearfix">
     
			<el-form :inline="true" :model="listQuery" class="demo-form-inline">
				<el-form-item label="场地">
					<el-select v-model="listQuery.matchPlaceId" placeholder="请选择" style="width:100px;" @change="getListByQuery">
						<el-option v-for="(item,index) in matchPlaceList" :key="index" :label="item.placeName" :value="item.id"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="项目">
					<el-input class="article-textarea"  style="width:110px;"  v-model="listQuery.scheduleName"></el-input>
				</el-form-item>
				<el-form-item label="组别">
					<el-input class="article-textarea"  style="width:110px;"  v-model="listQuery.scheduleGroup"></el-input>
				</el-form-item>
				<el-form-item label="级别">
					<el-input class="article-textarea"  style="width:110px;"  v-model="listQuery.scheduleLevel"></el-input>
				</el-form-item>
				<el-form-item label="状态">
					<el-select v-model="listQuery.state" placeholder="请选择" style="width:100px;">
						<el-option label="未完成" value="0"></el-option>
						<el-option label="已完成" value="1"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="getListByQuery">查询</el-button>
				</el-form-item>
			</el-form>
      <div class="fr" >
        <el-button style="margin-left: 10px;" @click="handleDelete(multipleSelection)" type="primary">删除场次</el-button>
      </div>
    </div>
		<el-table class="tqd_table" :key='tableKey' :data="list" @selection-change="handleSelectionChange" v-loading="listLoading" border fit highlight-current-row style="width: 100%;">
      <el-table-column  align="center" type="selection" width="55"></el-table-column>
      <el-table-column align="center" label="编号" show-overflow-tooltip width="150">
        <template slot-scope="scope">
          <span>{{scope.row.matchCode}}</span>
        </template>
      </el-table-column>
      <el-table-column label="项目名称" show-overflow-tooltip width="120">
        <template slot-scope="scope">
          <span v-if="scope.row.code == 'ttps'">团体品势</span>
          <span v-else-if="scope.row.code == 'hsps'">混双品势</span>
          <span v-else-if="scope.row.code == 'grps'">个人品势</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="组别/级别" width="250" show-overflow-tooltip>
        <template slot-scope="scope">
          <span>{{scope.row.scheduleName}}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="级别" width="250" show-overflow-tooltip>
        <template slot-scope="scope">
          <span>{{scope.row.scheduleLevel}}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="组别" width="250" show-overflow-tooltip>
        <template slot-scope="scope">
          <span>{{scope.row.scheduleGroup}}</span>
        </template>
      </el-table-column>
	    <el-table-column align="center" label="队伍、姓名" width="250" show-overflow-tooltip>
        <template slot-scope="scope">
          <span>{{scope.row.blueTeam}}：{{scope.row.bluePlayer}}</span>
          <span v-if="scope.row.redTeam != null">&nbsp;&nbsp;{{scope.row.redTeam}}：{{scope.row.redPlayer}}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="精准度" width="80" show-overflow-tooltip>
        <template slot-scope="scope">
          <span>{{scope.row.accuracyScore}}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="表现力" width="80" show-overflow-tooltip>
        <template slot-scope="scope">
          <span>{{scope.row.expressivenessScore}}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="总分" width="80" show-overflow-tooltip>
        <template slot-scope="scope">
          <span>{{scope.row.totalScore}}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="状态" show-overflow-tooltip>
        <template slot-scope="scope">
          <span v-if="scope.row.isLocked==0">未锁定</span>
          <span v-else>已锁定</span>
          <span v-if="scope.row.isComplete==0">未完成</span>
          <span v-else>已完成</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="操作">
        <template slot-scope="scope">
          <span v-if="scope.row.isComplete == 0">{{scope.row.matchAdmin}}</span>
          <span v-if="scope.row.isComplete == 1">{{scope.row.finalUser}}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="操作">
        <template slot-scope="scope">
          <el-button type="primary" size="mini" @click="editSchedule(scope.row.id,scope.row.lockId,scope.row)">编辑场次</el-button>
        </template>
      </el-table-column>
    </el-table>


    <div class="pagination-container">
      <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="listQuery.page" :page-sizes="[15,30, 50]" :page-size="listQuery.limit" layout="total, sizes, prev, pager, next, jumper" :total="total"></el-pagination>
    </div>

		<!-- 登记个人品势成绩 -->
    <el-dialog title="" v-if="dialogFormVisible2" :visible.sync="dialogFormVisible2" :center="true" width="60%"  :before-close="closeDialog">
      <editScheduleForm :scheduleId.sync="editScheduleId" ref="editScheduleDialog" :scheduleList="list"></editScheduleForm>
    </el-dialog>

    <!-- 登记个人品势成绩新 -->
    <el-dialog title="" v-if="dialogFormVisibleNew" :visible.sync="dialogFormVisibleNew" :center="true" width="900px" :close-on-click-modal="false" :before-close="closeDialog">
      <editScheduleNewForm :scheduleId.sync="editScheduleId" 
       :matchId.sync="editMatchId" 
       :matchPlaceId.sync="editMatchPlaceId" 
      ref="editScheduleDialog" :scheduleList="list"></editScheduleNewForm>
    </el-dialog>
    <el-dialog title="删除" :visible.sync="deleteMatchScheduleDialog" width="350px" :close-on-click-modal="false">
      <el-form label-position="left"  label-width="100px" style='width: 100%; '>
        <el-form-item label="密码">
          <el-input v-model="currentPassword"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="deleteMatchScheduleDialog = false">取消</el-button>
        <el-button type="primary" @click="confirmPasswordBtn">确定</el-button>
      </div>
    </el-dialog>
	</div>

</template>
<script>
import { getScheduleList, deleteSchedule } from '@/api/matchSchedule'
import { getMatchPlaceList } from '@/api/matchPlace'
import { lock, unLocked } from '@/api/matchScheduleLocked'
import { getMatchInfo } from '@/api/match'
import waves from '@/directive/waves' // 水波纹指令
import { showMsg } from '@/utils'
import editScheduleForm from './components/editSchedule'
import editScheduleNewForm from './components/editScheduleNew'
import { queryUserByPassword } from '@/api/user'
export default {
  name: 'complexTable',
  directives: {
    waves
  },
  data() {
    return {
      matchPlaceList: null,
      list2: [0, 0],
      tableKey: 0,
      list: null,
      total: null,
      listLoading: true,
      listQuery: {
        matchId: null,
        scheduleName: null,
        matchPlaceId: null,
        scheduleLevel: null,
        scheduleGroup: null,
        state: null,
        pageNum: 1,
        pageSize: 15
      },
      temp: {
        id: undefined,
        name: null,
        time: null,
        matchMode: null,
        dataURL: null,
        fieldNumber: null,
        refereeMode: null
      },
      dialogFormVisible: false,
      dialogFormVisible2: false,
      dialogFormVisible3: false,
      dialogFormVisibleNew: false,
      dialogStatus: '',
      textMap: {
        update: '修改',
        create: '添加'
      },
      dialogPvVisible: false,
      pvData: [],
      rules: {
        name: [{ required: true, message: '必填', trigger: 'blur' }],
        time: [{ required: true, message: '必选', trigger: 'change' }],
        dataURL: [{ required: true, message: '必填', trigger: 'blur' }],
        fieldNumber: [{ required: true, message: '必填', trigger: 'blur' }],
        refereeMode: [{ required: true, message: '必选', trigger: 'change' }]
      },
      downloadLoading: false,
      editScheduleId: null,
      editMatchId: 0,
      editMatchPlaceId: 0,
      lockId: null,
      isMutiLock: false,
      deleteMatchScheduleDialog: false,
      multipleSelection: [],
      isDel: false,
      currentPassword: null
    }
  },
  components: {
    editScheduleForm,
    editScheduleNewForm
  },
  created() {
    this.listQuery.matchId = this.$route.query.matchId
    this.listQuery.matchPlaceId = Number(this.$route.query.matchPlaceId)
    this.getMatchInfo()
    window.setInterval(() => {
      if (!this.isDel) {
        this.getList()
      }
    }, 10000)
    this.getList()
    this.getMatchPlaceList()
  },
  methods: {
    getMatchInfo() {
      getMatchInfo({ matchId: this.$route.query.matchId }).then(res => {
        this.isMutiLock = res.data.data.multiType
      })
    },
    closeDialog(done) {
      console.log(this.$refs)
      done()
    },
    handleSelectionChange(val) {
      this.multipleSelection = []
      for (var i in val) {
        this.multipleSelection.push(val[i].id)
      }
    },
    getMatchPlaceList() {
      getMatchPlaceList({ matchId: this.$route.query.matchId }).then(response => {
        this.matchPlaceList = response.data.data
        // this.total = response.data.total
        // this.listLoading = false
      })
    },
    getList() {
      // this.listLoading = true
      getScheduleList(this.listQuery).then(response => {
        this.list = response.data.data
        this.total = response.data.total

        // Just to simulate the time of the request
        this.listLoading = false
      })
    },
    getListByQuery() {
      this.listLoading = true
      getScheduleList(this.listQuery).then(response => {
        this.list = response.data.data
        this.total = response.data.total

        // Just to simulate the time of the request
        this.listLoading = false
      })
    },
    handleFilter() {
      this.listQuery.pageNum = 1
      this.getList()
    },
    handleSizeChange(val) {
      this.listQuery.limit = val
      this.getList()
    },
    handleCurrentChange(val) {
      this.listQuery.pageNum = val
      this.getList()
    },
    handleModifyStatus(row, status) {
      this.$message({
        message: '操作成功',
        type: 'success'
      })
      row.status = status
    },
    resetTemp() {
      this.temp = {
        id: undefined,
        name: null,
        time: null,
        matchMode: null,
        dataURL: null,
        fieldNumber: null,
        refereeMode: null
      }
    },
    handleCreate() {
      this.resetTemp()
      this.dialogStatus = 'create'
      this.dialogFormVisible = true
      this.$nextTick(() => {
        this.$refs['dataForm'].clearValidate()
      })
    },
    createData() {
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          this.temp.id = parseInt(Math.random() * 100) + 1024 // mock a id
          this.temp.author = 'vue-element-admin'
        }
      })
    },
    handleUpdate(row) {
      this.temp = Object.assign({}, row) // copy obj
      this.temp.timestamp = new Date(this.temp.timestamp)
      this.dialogStatus = 'update'
      this.dialogFormVisible = true
      this.$nextTick(() => {
        this.$refs['dataForm'].clearValidate()
      })
    },
    updateData() {
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          const tempData = Object.assign({}, this.temp)
          tempData.timestamp = +new Date(tempData.timestamp) // change Thu Nov 30 2017 16:41:05 GMT+0800 (CST) to 1512031311464
        }
      })
    },
    editSchedule(id, lId, row) {
      this.dialogFormVisibleNew = true
      this.editScheduleId = id
      this.editMatchId = row.matchId
      this.editMatchPlaceId = row.matchPlaceId
    },
    handleDelete(idList) {
      if (idList.length === 0) {
        showMsg('请至少选择一条数据', 2)
        this.isDel = false
        return false
      }
      this.isDel = true
      this.deleteMatchScheduleDialog = true
    },
    confirmPasswordBtn() {
      if (this.currentPassword === '') {
        showMsg('请输入密码', 2)
        return false
      }
      var obj = {
        userId: this.$store.state.user.matchAdminId,
        password: this.currentPassword
      }
      queryUserByPassword(obj).then(response => {
        if (response.data.data) {
          this.listLoading = true
          deleteSchedule(this.multipleSelection).then(res => {
            if (res.data.code === 0) {
              showMsg(res.data.message, 1)
              this.getList()
              this.deleteMatchScheduleDialog = false
              this.isDel = false
            } else {
              this.listLoading = false
              showMsg(res.data.message, 2)
            }
          })
        } else {
          showMsg('密码错误', 2)
        }
      })
    },
    lockMatch() {
      if (this.multipleSelection.length <= 0) {
        showMsg('请至少选择一条数据', 2)
        return false
      }
      var objList = null
      if (this.multiType) {
        objList = []
      }
      for (var i in this.multipleSelection) {
        var obj = {
          matchId: this.multipleSelection[i].matchId,
          matchScheduleId: this.multipleSelection[i].id,
          matchAdminId: 8888
        }
        if (!this.multiType) {
          objList = obj
        } else {
          objList.push(obj)
        }
      }

      lock(objList).then(res => {
        if (res.data.code === 0) {
          this.dialogFormVisible = false
          showMsg(res.data.message, 1)
          this.getList()
        } else {
          showMsg(res.data.message, 2)
        }
      })
    },
    unLockMatch() {
      if (this.multipleSelection.length <= 0) {
        showMsg('请至少选择一条数据', 2)
        return false
      }
      var objList = []
      for (var i in this.multipleSelection) {
        // var obj = {
        //   matchId: this.multipleSelection[i].matchId,
        //   matchScheduleId: this.multipleSelection[i].id,
        //   matchAdminId: 8888
        // }
        objList.push(this.multipleSelection[i].lockId)
      }
      unLocked(objList).then(res => {
        if (res.data.code === 0) {
          this.dialogFormVisible = false
          showMsg(res.data.message, 1)
          this.getList()
        } else {
          showMsg(res.data.message, 2)
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.setForm .setForm-row{
	.sm{
		width: 70px;
	}
	.fl-class{
		    -webkit-box-flex: 1;
    -webkit-flex: 1 1 auto;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
		width: 100%;
		.el-form-item__content{
			width:100%;
		}
	}
	display: flex;
	    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
	.el-form-item{
		vertical-align: middle;
	}
	input{
		text-align: center;
	}
	.border-green input{
		border: 2px solid mediumseagreen;
	}
	.big-size input{
		line-height: 50px;
		height: 50px;
	}
}
.item-list{
	.item-label{
		line-height: 36px;
	}
	input {
    resize: none;
    border: none;
    border-radius: 0;
    border-bottom: 1px solid #bfcbd9;
	}
}
</style>
<style lang="scss">
.item-list{
	input {
    resize: none;
    border: none;
    border-radius: 0;
    border-bottom: 1px solid #bfcbd9;
	}
}
.clearfix:after {
   content:"";
   display: block;
   clear:both;
}
</style>

